<template>
    <kdx-modal-frame v-model="value" title="金额调整" :width="900" @on-cancel="handleCancel" @on-ok="handleOk">
        <div class="content" style="padding: 12px;">
            <table class="ivu-table" cellspacing="0" style="width: 100%;">
                <tr>
                    <th class="text-center" style="width: 300px;">类型/金额</th>
                    <th class="text-center">说明</th>
                </tr>
                <tr v-for="(item, index) in changes" :key="index">
                    <td class="text-center">
                        <Row>
                            <i-col span="4">
                                <Button
                                    size="small"
                                    type="warning"
                                    @click="handleDelete(index)"
                                    style="margin-top: 3px;"
                                >删除</Button>
                            </i-col>
                            <i-col span="1"></i-col>
                            <i-col span="9">
                                <Select
                                    v-model="item.type"
                                    class="width-110"
                                >
                                    <Option
                                        v-for="pay in pays"
                                        :key="pay.type"
                                        :value="pay.type"
                                    >
                                        {{ pay.name }}
                                    </Option>
                                </Select>
                            </i-col>
                            <i-col span="1"></i-col>
                            <i-col span="9">
                                <kdx-rr-input 
                                    class="width-170"
                                    v-model="item.amount" 
                                    placeholder="请输入金额" 
                                    number :min-value="0" :max-value="99999">
                                    <span slot="append">元</span>
                                </kdx-rr-input>
                            </i-col>
                        </Row>
                    </td>
                    <td class="text-center" valign="top" style="padding: 10px 0;" >
                        <Input v-model="item.info" type="textarea" placeholder="请输入说明..."/>
                    </td>
                </tr>
            </table>
            <Button type="success" @click="handleAdd()" style="margin-top: 10px;">
                + 增加金额变动条目
            </Button>
        </div>
    </kdx-modal-frame>
</template>

<script>
export default {
    name: "AmountChange",
    props: {
        lease_manual_remark: {
            type: [Array]
        },
        id: {
            type: [Number, String]
        },
    },
    data() {
        return {
            value: false,
            pays: [
                {
                    type: 'add',
                    name: '返还给客户',
                },
                {
                    type: 'reduce',
                    name: '扣除',
                },
            ],
            changes: [],
        };
    },
    methods: {
        setValue() {
            this.value = !this.value;
            if (this.value) {
                this.changes = this.lease_manual_remark;
            }
        },
        handleCancel() {
            this.setValue();
        },
        handleDelete(index) {
            this.changes.splice(index)
        },
        handleAdd() {
            this.changes.push({
                'type': 'reduce',
                'amount': 0,
                'info': ''
            })
        },
        handleOk() {
            console.log(this.changes)
            let params = {
                order_id: this.id, 
                data: this.changes
            };
            this.$api.orderApi.setHandleManualData(params)
                .then(res => {
                    if (res.error === 0) {
                        !this.isExternal && this.setValue();
                        this.$emit('on-refresh');
                        location. reload()
                    }
                });
        }
    }
};
</script>
